<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <title>Thrive Mobile Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!--- Some jquery stuff --->
	<link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.css" type="text/css" />
    <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/thrive-theme.css" type="text/css">
    <script src="../../scripts/jquery.mobile-1.0.1/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="../../scripts/Thrive.js"  type="text/javascript"></script>
    <script src="../../scripts/2.5.3-crypto-sha1.js"  type="text/javascript"></script>
    <script src="AccountControl.js" type="text/javascript"></script>
    <script src="../Feel/Feel.js" type="text/javascript"></script>
    <script src="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>
    
    <link rel="stylesheet" href="../../css/style.css" type="text/css" />
</head>

<body>
	<div data-role="page" id="create" data-theme="a">
    
		<script type="text/javascript">
		
			$('#create').bind('pagebeforeshow', function() {
				clearCreateForm();
			});
			
			$("#not-sure-0").live("change" , function() {
				toggleParent1();
			});
			
			$("#not-sure-1").live("change" , function() {
				toggleParent2();
			});
			
			$("#password_temp").live('change', function() {
				verifyPasswordLength();
			});
			
			$("#confirm").live('change', function() {
				verifyPasswords();
			});
			
			$(".popup_container").live('click', function() {
				removePopup();
			});
			
			$(".popup_container").live('tap', function() {
				removePopup();
			});
			
			$(".popup_container").bind('touchstart', function()  {
				removePopup();
			});

			$("#submit_create").live('click', function() {
				createAccount();
			});
				
        </script>
        
        
        <div class="popup_container" style="display:none;">
            <div class="popup"></div>
        </div>
        
        <div data-role="header"data-theme="a">
        	<h1>Create</h1>
        	<a href="login.html" data-icon="delete" class="ui-btn-right">Cancel</a>
    	</div>
        
        <div data-role="content"data-theme="a">
            
            <form id="create_form" selected="true">
                <fieldset>
                    
                    <div class="row">
                    <label for="user_name">Enter your email address:</label>
                    <input type="email" name="user_name" id="user_name" value=""  />
                    </div>
                    
                    <div class="row">
                    <label for="password_temp">Enter a password:</label>
                    <input type="password" name="password_temp" id="password_temp" value=""  />
                    </div>
                    
                    <div class="row">
                    <label for="confirm">Confirm your password:</label>
                    <input type="password" name="confirm" id="confirm" value=""  />
                    </div>
                    
                    <!---<div class="row">
                      
                        <label for="data_share" class="select">Do you want to share your data?</label>
                        <select name="data_share" id="data_share">
                        	<option value="false">No</option>
                            <option value="true">Yes</option>
                        </select>
                    </div>--->
                    
                    
                    <div class="row">
                	<fieldset id="birthdate" data-role="controlgroup" data-type="horizontal">
                        <legend>Date of Birth:</legend>                        
                        
                        <label for="day">Day</label>
                        <select name="day" id="day">
                            <option value="01">1</option>
                            <option value="02">2</option>
                            <option value="03">3</option>
                            <option value="04">4</option>
                            <option value="05">5</option>
                            <option value="06">6</option>
                            <option value="07">7</option>
                            <option value="08">8</option>
                            <option value="09">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                        
                        
                        
                        <label for="month">Month</label>
                        <select name="month" id="month">
                            <option value="01">Jan</option>
                            <option value="02">Feb</option>
                            <option value="03">Mar</option>
                            <option value="04">Apr</option>
                            <option value="05">May</option>
                            <option value="06">Jun</option>
                            <option value="07">Jul</option>
                            <option value="08">Aug</option>
                            <option value="09">Sep</option>
                            <option value="10">Oct</option>
                            <option value="11">Nov</option>
                            <option value="12">Dec</option>
                        </select>
                
                        <label for="year">Year</label>
                        <select name="year" id="year">
                            <option value="2012">2012</option>
                            <option value="2011">2011</option>
                            <option value="2010">2010</option>
                            <option value="2009">2009</option>
                            <option value="2008">2008</option>
                            <option value="2007">2007</option>
                            <option value="2006">2006</option>
                            <option value="2005">2005</option>
                            <option value="2004">2004</option>
                            <option value="2003">2003</option>
                            <option value="2002">2002</option>
                            <option value="2001">2001</option>
                            <option value="2000">2000</option>
                            <option value="1999">1999</option>
                            <option value="1998">1998</option>
                            <option value="1997">1997</option>
                            <option value="1996">1996</option>
                            <option value="1995">1995</option>
                            <option value="1994">1994</option>
                            <option value="1993">1993</option>
                            <option value="1992">1992</option>
                            <option value="1991">1991</option>
                            
                        </select>
                    </fieldset>
               		</div>
                
                    <div class="row">                         
                            <label for="grade" class="select">Grade:</label>
                            <select name="grade" id="grade">
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="other">Other</option>
                            </select>
                    </div>
                
                    <div class="row">
                        
                        <label for="sex" class="select">Sex:</label>
                        <select name="sex" id="sex">
                            <option value="m">Male</option>
							<option value="f">Female</option>
                        </select>
                    </div>
                
                <div class="row">                 
                   		<label for="ethnicity" class="select">Ethnicity:</label>
                        <select name="ethnicity" id="ethnicity">
                            <option value="asian">Asian</option>
							<option value="black">Black</option>
                            <option value="first-nations">First Nations</option>
							<option value="hispanic">Hispanic</option>
                            <option value="white">White</option>
							<option value="other">Other</option>
                        </select>
                </div>
                
                <div id="parent" class="row">
                        <label>What are your parents' jobs?</label>
                        
                        <label for="parent1_job">Parent 1:</label>
                        <input type="text" name="parent1_job" id="parent1" value=""  />
                        <fieldset data-role="controlgroup" > 
                            <input type="checkbox" name="not-sure-0" id="not-sure-0" value="0" />
                            <label for="not-sure-0">Not Sure</label>
                        </fieldset>
    
                        <label for="parent2_job">Parent 2:</label>
                        <input type="text" name="parent2_job" id="parent2" value=""  />
                        <fieldset data-role="controlgroup" > 
                            <input type="checkbox" name="not-sure-1" id="not-sure-1" value="1" />
                            <label for="not-sure-1">Not Sure</label>
                        </fieldset>
                </div>       
                <div class="row">
                <label for="touchscreen" class="select">Do you have a touchscreen phone?</label>
                <select name="touchscreen" id="touchscreen">
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
                </div>
                
                <div class="row">
                <label for="use" class="select">When do you use your phone?</label>
                <select name="phone_use" id="use">
                    <option value="home">Only at home</option>
                    <option value="friends">With friends</option>
                    <option value="school">At school</option>
                    <option value="all">All of the above</option>
                </select>
                </div>
                
           
                </fieldset>
                <a id="submit_create" type="submit" href="javascript:void(0)">Create</a>
            </form>
        
        </div>

    
    </div>
    

</body>

</html>
